<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div style="margin: 10px">
<div style="margin-top: 10px;margin-right: 20px">
    <form class="layui-form" action="javascript:;" id="selectSpecificationDetailForm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">提交人姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="userName" id="userName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="demo2">立即搜索</button>
                </div>
            </div>
        </div>
    </form>
</div>
    <hr style="margin-bottom: 20px">
    <div style="margin-left: 10px;margin-right: 10px">
        <table class="layui-hide" id="demo" lay-filter="test"></table>
    </div>
    <input id="addReimburseHidden" value="" hidden="hidden">
</div>
<script type="text/html" id="barDemo">

    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="overruled">驳回</a>
    <a class="layui-btn  layui-btn-xs" lay-event="complete">通过</a>
</script>
<input type="text" hidden="hidden" id="overruledHidden">
<input type="text" hidden="hidden" id="parentId">
<input type="text" hidden="hidden" id="parentUserId">
<input type="text" hidden="hidden" id="parentTaskId">
<script src="/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['table', 'form', 'jquery', 'element','layer', 'laydate'], function () {
        var table = layui.table
            ,layer = layui.layer
            , form = layui.form
            , $ = layui.jquery
            , laydate = layui.laydate
            , element = layui.element;

        var tableRender = function () {
            //执行一个 table 实例

            table.render({
                elem: '#demo'
                , id:"reimburseList"
                , url: 'getReimburseByAssignee' //数据接口
                , title: '待审批明细表'
                , page: true //开启分页
                , limit: 10
                , limits: [10, 20, 30]
                , cols: [[ //表头
                    {type: 'numbers',title: '序号',width: 80}
                    , {field: 'userName', align: 'center', title: '提交人', width: 200}
                    , {field: 'content', align: 'center', title: '内容', width: 200}
                    , {field: 'amount', align: 'center', title: '金额', width: 130}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
            });
        }

        //初始化表格
        tableRender();


        var overruledReimburse = function(json){
            layer.open({
                title: ['驳回原因', 'font-size:18px;']
                , shade: 0.6 //遮罩透明度
                , area: '400px'//宽度
                , type: 2
                , anim: 1 //0-6的动画形式，-1不开启
                , content: 'jump?url=review/overruledText'
                , success: function (layero, index) {
                    //layer高度自适应
                    layer.iframeAuto(index);
                    $("#parentId").val(json.id);
                    $("#parentUserId").val(json.userId);
                    $("#parentTaskId").val(json.taskId);
                }
                , end: function () {
                    var overruledHidden = $("#overruledHidden").val();
                    if (overruledHidden == "success") {

                        $("#overruledHidden").val("");
                        tableRender();
                        layer.msg('已驳回', {
                            icon: 1,
                            time: 500 //2秒关闭（如果不配置，默认是3秒）
                        });
                    }
                }
            })


            };

        var completeReimburse = function(json){
                $.ajax({
                    type: "POST",
                    url: "/completeReimburse",
                    traditional: true,
                    data: JSON.stringify(json),
                    dataType: "json",
                    contentType: "application/json",
                    success: function (data) {
                        table.reload("reimburseList");
                        layer.msg('已通过！', {
                            icon: 1,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        });
                    },
                    error: function () {
                        console.log("调用删除方法失败！");
                    }
                });
            };




        //监听搜索按钮
        form.on('submit(demo2)', function (data) {
            var keyword = $("#userName").val();
            table.reload('reimburseList', {
                where: {"keyword": keyword}
            });
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            console.log(data);
            if(obj.event === 'overruled'){
                    overruledReimburse(data);


            } else if(obj.event === 'complete'){
                layer.confirm('确定通过吗？', function(index){
                    completeReimburse(data);
                    layer.close(index);
                });
            }
        });



    });
</script>

</body>
</html>